<template>
  <view class="filter-drawer">
    <TuiDrawer :visible="visible" mode="bottom" @close="visible = false">
      <view class="filter-box">
        <view class="header">
          <text class="title">筛选条件</text>
          <text
            class="ali-icon icon-guanbi2"
            style="font-size: 44rpx; color: #969799; padding: 5rpx"
            @click="visible = false"
          ></text>
        </view>
        <view class="content">
          <view class="group" v-for="(item, index) in options" :key="index">
            <view class="title">{{ item.groupName }}</view>
            <view class="shortcut-selector">
              <view
                v-for="(optionsItem, optionsIndex) in item.children"
                :key="optionsIndex"
                class="shortcut-item"
                :class="{ 'selected-item': isChecked(index, optionsItem.id) }"
                @click="handleClick(index, optionsItem.id)"
              >
                {{ optionsItem.name }}
              </view>
            </view>
          </view>
        </view>
        <TButtonGroup position="fixed" :styles="{ gap: '24rpx' }">
          <TButton
            text="重置"
            type="none"
            :customStyle="{ width: '331rpx', borderRadius: '44rpx', border: '1px solid #CCCCC8' }"
            @click="handleReset"
          />
          <TButton
            text="筛选"
            type="primary"
            :customStyle="{ width: '331rpx', borderRadius: '44rpx' }"
            @click="handleSearch"
          />
        </TButtonGroup>
      </view>
    </TuiDrawer>
  </view>
</template>
<script setup lang="ts">
  import TuiDrawer from '@/components/TuiDrawer/index.vue';
  import TButton from '@/components/TButtonGroup/TButton.vue';
  import TButtonGroup from '@/components/TButtonGroup/index.vue';
  import { onMounted, reactive, ref } from 'vue';
  import { downList } from '@/api';

  const emits = defineEmits(['ok']);

  const options = reactive<
    {
      groupName: string;
      selected: number | undefined;
      groupField: string;
      children: { id: number | undefined; name: string }[];
    }[]
  >([
    {
      groupName: '会员职务',
      groupField: 'identity',
      selected: undefined,
      children: [],
    },
  ]);
  onMounted(() => {
    queryMemberLeve();
  });
  const queryMemberLeve = async () => {
    options[0].children = [
      { id: undefined, name: '全部' },
      { id: 1, name: '会员' },
      { id: 0, name: '非会员' },
    ];
  };
  const isChecked = (index: number, id: number | undefined) => {
    return options[index].selected === id;
  };
  const handleClick = (index: number, id: number | undefined) => {
    options[index].selected = id;
  };
  const visible = ref(false);
  const handleReset = () => {
    options.forEach((item) => (item.selected = undefined));
    handleClose();
    emits('ok');
  };
  const handleSearch = () => {
    emits(
      'ok',
      options.map((item) => ({
        groupField: item.groupField,
        id: item.selected,
      })),
    );
    handleClose();
  };
  const handleClose = () => {
    visible.value = false;
  };
  const handleOpen = () => {
    visible.value = true;
  };

  defineExpose({
    handleClose,
    handleOpen,
  });
</script>
<style lang="scss" scoped>
  .filter-drawer {
    .filter-box {
      height: 1000rpx;
      .header {
        height: 96rpx;
        box-shadow: 0px -1px 0px 0px #ebedf0 inset;
        padding-right: 24rpx;
        padding-left: 312rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .title {
          font-size: 32rpx;
          line-height: 44rpx;
        }
      }
      .content {
        padding: 32rpx;
        display: flex;
        flex-direction: column;
        gap: 24rpx;
        .group {
          .title {
            font-size: 32rpx;
            line-height: 48rpx;
            margin-bottom: 24rpx;
          }
          .shortcut-selector {
            display: flex;
            flex-wrap: wrap;
            gap: 24rpx;
            .shortcut-item {
              padding: 12rpx 24rpx;
              background-color: #f2f3f5;
              display: flex;
              justify-content: center;
              align-items: center;
              font-size: 28rpx;
              color: #666664;
              border-radius: 44rpx;
            }
          }
          .selected-item {
            background-color: #2878ff !important;
            color: white !important;
          }
        }
      }
    }
  }
</style>
